<template>
  <div class="content-outer">
    <Block class="content-head">
      <BiForm>
        <BiFormItem label="拼团短剧">
          <template slot="content">
            <selectPlaylet
              type="playlet"
              :is-resize="isResize"
              :multiple="true"
              @result="playletSelect"
            />
          </template>
        </BiFormItem>
        <BiFormItem label="道具ID">
          <template slot="content">
            <el-input
              v-model="formData.prop_id"
              clearable
              placeholder="请输入道具ID"
            />
          </template>
        </BiFormItem>
        <BiFormItem>
          <template slot="button">
            <el-button
              style="margin-left: 10px"
              type="primary"
              :disabled="loading"
              :loading="loading"
              @click="clickSearch('查询')"
            >查询</el-button>
            <el-button @click="reset">重置</el-button>
          </template>
        </BiFormItem>
      </BiForm>
    </Block>
    <Block class="content-table">
      <div class="action-box">
        <div class="left rowFlex allCenter"></div>
        <div class="right">
          <el-button
            type="primary"
            @click="add('新增')"
          >新增拼团</el-button>
        </div>
      </div>
      <div class="table-table">
        <BiTable
          :loading="loading"
          :data="tableData"
          size="medium"
          :column="tableColums"
          fixed="sticky"
          fixed-offset="50"
          pagination
          layout="total, prev, pager, next"
          :auto-scroll="false"
          :total="page_info.total"
          :page.sync="page_info.page"
          :limit.sync="page_info.page_size"
          @pagination="handlePageChange"
        >
          <template v-slot:zip="{ row }">
            <el-button
              type="text"
              size="medium"
              @click="edit(row)"
            >编辑</el-button>
            <el-button
              type="text"
              size="medium"
              @click="purchaseData(row)"
            >拼团数据</el-button>
          </template>
        </BiTable>
      </div>
    </Block>
    <BiDrawer
      v-model="drawer.visible"
      :drawer-title="drawer.title"
      :row="drawer.row"
      :component="addPurchase"
      drawer-size="600px"
      @ok="onSubmit"
    ></BiDrawer>
    <!-- 拼团数据 -->
    <BiDrawer
      v-model="drawer.dataVisible"
      drawer-title="拼团数据"
      :row="drawer.row"
      :component="purchaseDataList"
      drawer-size="900px"
      @ok="onSubmit"
    ></BiDrawer>
  </div>
</template>
<script>
import BiDrawer from '@/components/BiDrawer'
import addPurchase from './component/addPurchase.vue'
import purchaseDataList from './component/purchaseData'
import { purchaseList } from '@/api/active'
export default {
  name: 'Pays',
  components: {
    BiDrawer
  },
  data() {
    return {
      drawer: {
        visible: false,
        dataVisible: false,
        title: '新增商户号',
        row: {}
      },
      isResize: false,
      addPurchase: addPurchase,
      purchaseDataList: purchaseDataList,
      addMerchantDrawer: false,
      formData: {
        playlet_id: [],
        prop_id: ''
      },
      loading: false,
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      },
      tableData: [],
      tableColums: [
        {
          label: '拼团短剧',
          prop: 'playlet_title',
          minWidth: 220
        },
        {
          label: '道具ID',
          prop: 'prop_id',
          minWidth: 120
        },
        {
          label: '售价',
          prop: 'origin_price',
          minWidth: 120
        },
        {
          label: '拼单价',
          prop: 'price',
          minWidth: 120

        },
        {
          label: '操作',
          prop: 'zip',
          minWidth: 160,
          fixed: 'right',
          align: 'left',
          slotScope: true
        }
      ]
    }
  },
  mounted() {
    this.clickSearch()
    this.$AccessReport.report('zhangyu-merchant', [this.$store.state.user.routerItem.name, '运营管理', '拼团管理'])
  },
  methods: {
    playletSelect(value) {
      this.formData.playlet_id = value
    },
    clickSearch(type) {
      if (type == '查询') {
        this.page_info.page = 1
      }
      const data = {
        playlet_id: this.formData.playlet_id,
        prop_id: this.formData.prop_id
      }
      this.loading = true
      purchaseList({ ...data, ...this.page_info }).then((res) => {
        this.loading = false
        if (res.status_code === 1) {
          this.tableData = res.data.data
          this.page_info = res.data.page_info
        }
      })
    },
    purchaseData(row) {
      this.drawer.dataVisible = true
      this.drawer.title = '拼单数据'
      this.drawer.row = row
    },
    clickCopy(msg) {
      const input = document.createElement('input')
      // input.hidden = true
      input.setAttribute('value', msg)
      document.body.appendChild(input)
      input.select()
      document.execCommand('copy')
      document.body.removeChild(input)
      this.$message.success('复制成功')
    },
    reset() {
      this.$set(this, 'formData', {
        playlet_id: [],
        prop_id: ''
      })
      this.isResize = true
      setTimeout(() => {
        this.isResize = false
      }, 1000)
      this.$set(this, 'page_info', {
        page: 1,
        page_size: 20,
        total: 0
      })
    },
    add(title) {
      this.drawer.title = '新增拼团'
      this.drawer.row = {}
      this.drawer.visible = true
    },
    edit(row) {
      this.drawer.title = '编辑拼团'
      this.drawer.row = row
      this.drawer.visible = true
    },
    delRow(row) {
      merchantDel({ id: row.id }).then((res) => {
        if (res.status_code === 1) {
          this.$message.success(res.msg)
          setTimeout(() => {
            this.clickSearch()
          }, 500)
        }
      })
    },
    handlePageChange(page) {
      this.page_info.page = page.page
      this.clickSearch()
    },
    onSubmit(data) {
      console.log(1231)
      this.clickSearch()
    }
  }
}
</script>
<style lang="scss" scoped>
.content-outer {
  .content-head {
  }

  .content-table {
    .action-box {
      .left {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #4e5969;
        text-align: right;
      }
    }
  }
}

.game-name {
  display: flex;
  align-items: center;

  .svg-icon-box {
  }

  .private_key {
    width: 120px;
    height: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }
}

.popoverText {
  width: 280px;
  height: 300px;
  overflow: auto;
}

.icon {
  font-size: 16px;
  color: #06c261;
  margin-left: 10px;
  cursor: pointer;
}
</style>
